<template>
  <el-dialog v-model="visible" title="货单详情" :before-close="handleClose">
    <h3>发货客户信息</h3>
    <p>姓名：{{ bookingData.cfrom.name }}，电话：{{ bookingData.cfrom.phone }}，地址：{{ bookingData.cfrom.addr }}。</p>
    <h3>发货仓库及操作员信息</h3>
    <p>仓库名：{{ bookingData.wfrom.name }}，地址：{{ bookingData.wfrom.addr }}。
      操作员姓名：{{ bookingData.ofrom == null ? '系统创建' : bookingData.ofrom.name }}，
      联系方式：{{ bookingData.ofrom == null ? '系统创建' : bookingData.ofrom.phone }}。</p>
    <h3>收货客户信息</h3>
    <p>姓名：{{ bookingData.cto.name }}，电话：{{ bookingData.cto.phone }}，地址：{{ bookingData.cto.addr }}。</p>
    <h3>收货仓库及操作员信息</h3>
    <p>仓库名：{{ bookingData.wto.name }}，地址：{{ bookingData.wto.addr }}。
      操作员姓名：{{ bookingData.oto == null ? '暂无' : bookingData.oto.name }}，
      联系方式：{{ bookingData.oto == null ? '暂无' : bookingData.oto.phone }}。</p>
    <h3>状态信息</h3>
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in activities"
                        :key="index" :color="activity.color" :timestamp="activity.timestamp">
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>
    <h3>验收信息</h3>
    <p>验收结果：{{ ifNull(bookingData.booking.checkResult, '无') }}，结果备注：{{ ifNull(bookingData.booking.checkDesc, '无') }}</p>
    <h3>费用信息</h3>
    <p>计费方式：按重计费，重量：{{ bookingData.booking.weight }}kg，运费：{{ bookingData.booking.money }}元，货物价值：{{ bookingData.booking.value }}</p>
    <h3>付款方式</h3>
    <p>{{ bookingData.booking.payBefore ? '发货前付款' : '货到付款' }}</p>
  </el-dialog>
</template>

<script>
export default {
  name: "BookingView",
  props: ['bookingData', 'closeDialog'],
  data() {
    return {
      visible: false,
      activities: [],
    }
  },
  methods: {
    handleClose() {
      this.visible = false;
      this.closeDialog();
    },
    ifNull(str, placeholder) {
      return (str == null || str === '') ? placeholder : str;
    },
  },
  mounted() {
    this.visible = true;
    if (this.bookingData.booking.checkIn != null) {
      this.activities.push({
        content: '货单提交',
        timestamp: this.bookingData.booking.checkIn,
        color: '#fff58b'
      })
      if (this.bookingData.transport != null) {
        if (this.bookingData.transport.depart != null) {
          this.activities.push({
            content: '司机接单',
            timestamp: this.bookingData.transport.depart,
            color: '#a5ffa5'
          })
          if (this.bookingData.transport.arrive != null) {
            this.activities.push({
              content: '货物到达',
              timestamp: this.bookingData.transport.arrive,
              color: '#ff6e79'
            })
            if (this.bookingData.booking.checkOut != null) {
              this.activities.push({
                content: '用户收货',
                timestamp: this.bookingData.booking.checkOut,
                color: '#b6b6b6'
              })
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>